<template>
    <div ref="eCharts" style="height: 100%"></div>
</template>

<script>
    import BaseCharts from "./BaseCharts";
    export default {
        name: "MixCharts",
        mixins:[BaseCharts],
        mounted(){
            this.$nextTick(function (){
                this.draw();
            })
        },
        methods:{
            i18n(name,text,key){
                return this.$ti18(name,text,"charts",key);
            },
            draw(){
                var colors = ['#5470C6', '#91CC75', '#EE6666'];

                var option = {
                    color: colors,

                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'cross'
                        }
                    },
                    grid: {
                        right: '20%'
                    },
                    toolbox: {
                        feature: {
                            dataView: {show: true, readOnly: false},
                            restore: {show: true},
                            saveAsImage: {show: true}
                        }
                    },
                    legend: {
                        data: [this.i18n('evaporation','蒸发量'), this.i18n('precipitation','降水量'), this.i18n('averTemper','平均温度')]
                    },
                    xAxis: [
                        {
                            type: 'category',
                            axisTick: {
                                alignWithLabel: true
                            },
                            data: [this.i18n('January','1月'), this.i18n('February','2月'), this.i18n('March','3月'), this.i18n('April','4月'), this.i18n('May','5月'), this.i18n('June','6月'), this.i18n('July','7月'), this.i18n('August','8月'), this.i18n('September','9月'), this.i18n('October','10月'), this.i18n('November','11月'), this.i18n('December','12月')]
                        }
                    ],
                    yAxis: [
                        {
                            type: 'value',
                            name: this.i18n('evaporation','蒸发量'),
                            min: 0,
                            max: 250,
                            position: 'right',
                            axisLine: {
                                show: true,
                                lineStyle: {
                                    color: colors[0]
                                }
                            },
                            axisLabel: {
                                formatter: '{value} ml'
                            }
                        },
                        {
                            type: 'value',
                            name: this.i18n('precipitation','降水量'),
                            min: 0,
                            max: 250,
                            position: 'right',
                            offset: 80,
                            axisLine: {
                                show: true,
                                lineStyle: {
                                    color: colors[1]
                                }
                            },
                            axisLabel: {
                                formatter: '{value} ml'
                            }
                        },
                        {
                            type: 'value',
                            name: this.i18n('averTemper','平均温度'),
                            min: 0,
                            max: 25,
                            position: 'left',
                            axisLine: {
                                show: true,
                                lineStyle: {
                                    color: colors[2]
                                }
                            },
                            axisLabel: {
                                formatter: '{value} °C'
                            }
                        }
                    ],
                    series: [
                        {
                            name: this.i18n('evaporation','蒸发量'),
                            type: 'bar',
                            data: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3]
                        },
                        {
                            name: this.i18n('precipitation','降水量'),
                            type: 'bar',
                            yAxisIndex: 1,
                            data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3]
                        },
                        {
                            name: this.i18n('averTemper','平均温度'),
                            type: 'line',
                            yAxisIndex: 2,
                            data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2]
                        }
                    ]
                };
                this.drawCharts(option);
            }
        }
    }
</script>

<style scoped>

</style>